<template>
	<view>
		<view class="cu-bar search bg-white fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" v-model="param.title" placeholder="输入关键词搜索"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue round" @click="onSearch">搜索</button>
			</view>
		</view>
		
		<view class="list flex flex-direction flex-gap-sm margin-sm" style="margin-top: 60px;">
			<view class="item flex flex-gap-sm padding-sm radius2" style="background-color: #fff;"
				v-for="(item,index) in articleList" :key="item.id" @click="toDetail(item.id)">
				<img :src="item.cover.url" style="width: 120px;height: 80px;border-radius: 2px;" />
				<view class="flex-sub flex flex-direction justify-between">
					<text class="text-df justify-between text-black">{{item.title}}</text>
					<view>
						<text class="cu-tag sm light bg-blue" v-for="(item,index) in item.tags" :key="index">{{item}}</text>
					</view>
					<view class="flex align-center justify-between text-grey">
						<text v-if="item.price===0" class="text-green">免费</text>
						<text v-else class="text-orange">{{item.price}}金豆</text>
						<text><text class="cuIcon-attention margin-right-xs"></text> {{item.viewCount}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import articleApi from "@/api/articleApi.js"
	
	export default {
		data() {
			return {
				articleList: [],
				param: {
					size: 20,
					current: 1,
					title: null
				}
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.param.current += 1
			articleApi.page(this.param).then(res => {
				if(res.data.records.length > 0){
					this.articleList.push(...res.data.records)
				}else{
					this.param.current -= 1
					uni.showToast({
						title: '没有更多了~',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			getData(){
				articleApi.page(this.param).then(res => {
					this.articleList = res.data.records
				})
			},
			onSearch(){
				this.param.current = 1
				this.getData()
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/detail/detail?id='+id
				})
			}
		}
	}
</script>


<style lang="scss">
	.cu-bar.fixed, .nav.fixed{
		box-shadow: none;
	}
	
</style>